<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 50px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="cate-list">
            <h2>搜索</h2>
            <ul class="list1">
                <li>
                    <a href="">
                        <img src="" alt="">
                        <p></p>
                    </a>
                </li>
            </ul>
        </div>
    </div>


    <script>
        // 找到了所有接口地址
        var cateAPI = 'https://www.frontendjs.com/api/w_cate'
        var hotAPI = 'https://www.frontendjs.com/api/w_site/hot?limit=24'
        var siteAPI = 'https://www.frontendjs.com/api/w_site'
        var adAPI = 'https://www.frontendjs.com/api/ad'
        var weiboAPI = 'https://www.frontendjs.com/api/hot/weibo'
        var hotArticleAPI = 'https://www.frontendjs.com/api/hot_article';
        loadCateList();

        // 定义了6个函数-一个函数调用一个接口
        function loadCateList() {
            let xhr = new XMLHttpRequest()
            xhr.open('get', cateAPI);
            xhr.send()
            // console.log(xhr.responseText);
            xhr.onload = function () {
                if (xhr.status == 200) {

                    let obj = JSON.parse(xhr.responseText)
                    console.log(obj, '第一层列表数据');



                    // 获取最外层的列表的数据

                    // 调用的第二个列表
                    let xhr2 = new XMLHttpRequest()
                    xhr2.open('get', siteAPI);
                    xhr2.send()
                    xhr2.onload = function () {
                        if (xhr2.status == 200) {
                            let obj2 = JSON.parse(xhr2.responseText)
                            console.log(obj2, '第二层列表');

                            // 
                            let str = ''
                            // 遍历的第一层列表 目录列表
                            obj.data.forEach(v => {
                                // obj -》v -
                                // v 一个v表示一个目录 v.title 目录的标题
                                // v.type
                                // 根据 目录type属性，找到 目录的所有子列表中数据
                                // 去obj2.data.list 里面找对应的 目录的子列表数据（v。type）
                                // 去obj2.data.list 中找到 元素的type属性和变量v.type相等 
                                var subList = obj2.data.list.filter(item => item.type == v.type);
                                console.log(v);//目录数据
                                console.log(subList);//目录子列表
                                // subList 要生成--ul里面的li列表

                                obj2.data
                                str += `
                                    <div class="cate-list">
                                        <h2>${v.title}</h2>
                                        <ul class="list1">
                                            
                                            ${subList.map(v2 => ` <li>
                                                                    <a href="${v2.link}">
                                                                        <img src="${v2.img}" alt="">
                                                                        <p>${v2.title}</p>
                                                                    </a>
                                                                </li>`).join('')}
                                        </ul>
                                    </div>
                        
                        `
                            })

                            document.querySelector('.container').innerHTML = str;



                        }
                    }



                }
            }
        }

        function loadHotList() {
            let xhr = new XMLHttpRequest()
            xhr.open('get', hotAPI);
            xhr.send()
            xhr.onload = function () {
                if (xhr.status == 200) {
                    let obj = JSON.parse(xhr.responseText)
                    console.log(obj);

                }
            }
        }

        function loadSiteList() {

        }
        function loadAdList() {
            let xhr = new XMLHttpRequest()
            xhr.open('get', adAPI);
            xhr.send()
            xhr.onload = function () {
                if (xhr.status == 200) {
                    let obj = JSON.parse(xhr.responseText)
                    console.log(obj);

                }
            }
        }

        function loadWeiboList() {
            let xhr = new XMLHttpRequest()
            xhr.open('get', weiboAPI);
            xhr.send()
            xhr.onload = function () {
                if (xhr.status == 200) {
                    let obj = JSON.parse(xhr.responseText)
                    console.log(obj);

                }
            }
        }

        function loadhotArticleList() {
            let xhr = new XMLHttpRequest()
            xhr.open('get', hotArticleAPI);
            xhr.send()
            xhr.onload = function () {
                if (xhr.status == 200) {
                    let obj = JSON.parse(xhr.responseText)
                    console.log(obj);

                }
            }
        }

    </script>

</body>

</html>